$ui-width: 750;
$num: 15;
$baseFontSize: 50;  // 750 / 15
@function px2rem($px){
    @return $px / $baseFontSize + rem;
}    


html {
    font-size: $ui-width / $num + px;
}
*{
    margin: 0;
    padding: 0;
}
body{
    background: #f8f8f8;
    width: 15rem;
    margin: auto;
}
.body{
    width: px2rem(750);
    height: px2rem(3400);
    overflow: hidden;
}

li{
    list-style: none;
}
.topFlxed{
    width: px2rem(750);
    height: px2rem(100);
    background: url("./img/top.jpg");
    position: fixed;
    top: 0;
    display: none;
    z-index: 10;
    input{
        width: px2rem(450);
        height: px2rem(60);
        padding-left: px2rem(70);
        border-radius: px2rem(100);
        font-size: px2rem(26);
        border: 0;
        outline: 0;
    }
    .topImgFlxed{
        width: px2rem(650);
        height: px2rem(60);
        margin: auto;
        display: flex;    
        flex-wrap: wrap;
    .inputFlxed{
       width: px2rem(520);
       height: px2rem(60);
       margin: auto;
       padding-top: px2rem(20);
    }
    svg{
        font-size: px2rem(34);
        position: relative;
        left: px2rem(24);
        top: px2rem(-70);
        }
       
       
        }
}
#top{
    width: px2rem(750);
    height: px2rem(180);
    background: url("./img/top.jpg");
   
    .topImg{
        width: px2rem(750);
        height: px2rem(60);
        padding-top: px2rem(10);
        display: flex;
        justify-content: space-around;/*两端式布局*/
        .middle{
            width: px2rem(350);
            height: px2rem(70);
        }
    }
   .input{
       width: px2rem(700);
       height: px2rem(60);
       margin: auto;
       padding-top: px2rem(20);
       svg{
        font-size: px2rem(34);
        position: relative;
        left: px2rem(24);
        top: px2rem(-70);
        }
       input{
        width: px2rem(630);
        height: px2rem(60);
        padding-left: px2rem(70);
        border-radius: px2rem(100);
        font-size: px2rem(26);
        border: 0;
        outline: 0;
    }
   }
}
.center{
    width: px2rem(750);
    height: px2rem(500);
    background: url("./img/center.jpg");
    background-repeat :repeat-x;
    .swiper-container{
        width: px2rem(700);
        height: px2rem(250);
        border-radius: px2rem(20);
        img{
            width: px2rem(700);
            height: px2rem(250);
        }
    }
    .middle{
        width: px2rem(750);
        height: px2rem(250);
        margin-top: px2rem(10);
        border-radius: px2rem(20);
        img{
            width: px2rem(252);
            height: px2rem(250);
            margin-right: px2rem(-18);
        }
    }
    .bottom{
        width: px2rem(750);
        height: px2rem(250);
        margin-top: px2rem(20);
        ul{
            width: px2rem(650);
            display: flex;
            flex-wrap: wrap;
            margin: auto;
            li{
                width: px2rem(120);
                height: px2rem(120);
                margin-left: px2rem(10);
                font-size: px2rem(20);
                text-align: center;
                color: #666666;
                img{
                    width: px2rem(80);
                    height: px2rem(80);
                    display: block;
                    margin: auto;
                }
            }
        }
    }
}
    .recommend{
        width: px2rem(750);
        height: px2rem(600);
        position: relative;
        top: px2rem(280);
        .topImg{
            width: px2rem(700);
            height: px2rem(50);
            margin: auto;
            display: block;
        }
        .top{
            width: px2rem(710);
            padding-top: px2rem(10);
            text-align: center;
            margin: auto;
            ul{
                display: flex;
                flex-wrap: wrap;
                .E244AA{
                    color: #E244AA;
                }
                .A42AE0{
                    color: #A42AE0;
                }
                .fba600{
                    color: #fba600;
                }
                .sBA093{
                    color: #4BA093;
                }
                li{
                    margin-left: px2rem(10);
                    height: px2rem(300);
                    img:nth-child(1){
                        width: px2rem(160);
                        height: px2rem(140);
                        position: absolute;
                    }
                    img:nth-child(2){
                        width: px2rem(160);
                        height: px2rem(240);
                    }
                    span:nth-child(3){
                        color: white;
                        font-size: px2rem(26);
                        left: px2rem(2);
                    }
                    span:nth-child(4){
                        width: px2rem(150);
                        height: px2rem(30);
                        text-align: center;
                        margin-top: px2rem(6);
                        border-radius: px2rem(100);
                        background: white;
                        font-size: px2rem(20);
                    }
                    span{
                        display: block;
                        position: relative;
                        top: px2rem(-86);
                        left: px2rem(10);
                    }
                }
            }
            .xrdlb{
                width: px2rem(740);
                height: px2rem(220);
                margin-bottom: px2rem(20);
                display: flex;
                flex-wrap: wrap;
                img:nth-child(1){
                    width: px2rem(350);
                }
                img{
                    width: px2rem(186);
                    height: px2rem(220);
                    margin-left: px2rem(2);
                }
            }
        }
        .bottom{
            height: px2rem(700);
            width: px2rem(700);
            margin: auto;
            border-radius: px2rem(20);
            overflow: hidden;
            span{
                position: relative;
                font-size: px2rem(16);
                top: px2rem(-30);
            }
            span:nth-child(3){
                display: block;
                margin-top: px2rem(10);
                margin-left: px2rem(20);
                font-size: px2rem(18);
            }
            span:nth-child(2){
                color:#a59898;
                top: px2rem(-50);
                left: px2rem(20);
            }
            ul{
                width: px2rem(800);
                height: px2rem(500);
                display: flex;
                flex-wrap: wrap;
                li:nth-child(1),li:nth-child(3){
                    border-right: px2rem(1) solid #f3f3f3;
                }
                li:nth-child(1){
                    span:nth-child(6){
                     left: px2rem(60);
                     color: red;
                     font-size: px2rem(14);
                     font-weight: 700;
                     }
                     span:nth-child(7){
                     color: red;
                     font-size: px2rem(14);
                     font-weight: 700;
                     display: block;
                     left: px2rem(230);
                     top: px2rem(-65);
                     }
                }
                li:nth-child(2){
                    span:nth-child(6){
                        left: px2rem(40);
                        font-size: px2rem(14);
                     }
                     span:nth-child(7){
                        font-size: px2rem(14);
                        display: block;
                        left: px2rem(200);
                        top: px2rem(-60);
                     }
                }
                li:nth-child(3){
                    span:nth-child(6){
                        left: px2rem(40);
                        font-size: px2rem(14);
                     }
                     span:nth-child(7){
                        display: block;
                        left: px2rem(220);
                        top: px2rem(-65);
                        font-size: px2rem(14);
                     }
                }
                li:nth-child(4){
                    span:nth-child(6){
                        left: px2rem(40);
                        font-size: px2rem(14);
                    }
                     span:nth-child(7){
                        font-size: px2rem(14);
                        display: block;
                        left: px2rem(200);
                        top: px2rem(-65);
                     }
                }
                li{
                    width: px2rem(350);
                    height: px2rem(260);
                    padding-top: px2rem(10);
                    background: white;
                    a{
                        color: #b47e3a;
                        width: px2rem(80);
                        font-size: px2rem(16);
                        text-align: center;
                        background: #fbf6ef;
                        display: inline-block;
                        border-radius: px2rem(100);
                        margin-left: px2rem(10);
                    }
                    img{
                        width: px2rem(110);
                        height: px2rem(110);
                        margin-left: px2rem(30);
                        margin-right: px2rem(30);
                        float: left;
                    }
                    span:nth-child(1){
                        color: black;
                        font-size: px2rem(20);
                        font-weight: 700;
                        margin-left: px2rem(20);
                    }
                }
            }
            dt{
                width: px2rem(700);
                height: px2rem(170);
                margin-top: px2rem(40);
                background: white;
                display: flex;
                dl:nth-child(1){
                    margin-top: px2rem(40);
                }
                dl{
                    width: px2rem(100);
                    height: px2rem(160);
                    margin-left: px2rem(30);
                    img{
                        width: px2rem(110);
                        height: px2rem(110);
                    }
                    span:nth-child(1){
                        color: black;
                        font-size: px2rem(20);
                        font-weight: 700;
                    }
                }
            }
        }
        @keyframes lb{
            0%{
              height: 0;
              width: 0;
            }
    }
        .bottomMiddle{
            width: px2rem(700);
            margin: auto;
           h6{
               margin-top: px2rem(20);
                margin-bottom: px2rem(20);
           }
            .rotation{
                display: flex;
                justify-content: center;
                .lb{
                    width: px2rem(250);
                    height: px2rem(270);
                    margin-left: px2rem(-8);
                    margin-bottom: px2rem(40);
                    .lbt{
                        animation:lb 1s;
                    }
                    li:nth-child(1){
                        display: block;
                    }
                    li{
                        display: none;
                        position: absolute;
                    }
                }
                ul{
                    height: px2rem(350);
                    li{
                        width: px2rem(210);
                        height: px2rem(300);
                        overflow: hidden;
                        border-radius: px2rem(10);
                        margin-left: px2rem(14);
                        margin-right: px2rem(14);
                        text-align: center;
                        span:nth-child(2){
                            top: px2rem(-65);
                            width: px2rem(80);
                            height: px2rem(24);
                            font-size: px2rem(20);
                            line-height: px2rem(24);
                            text-align: center;
                            color: #e5a577;
                            border:2px #e5a577 solid;
                            display: inline-block;
                            background: white;
                            border-radius: px2rem(100);
                        }
                        span:nth-child(3){
                            color: white;
                            display: block;
                            font-size: px2rem(22);
                            top: px2rem(-70);
                        }
                        span:nth-child(4){
                            color: white;
                            margin: auto;
                            top:px2rem(-100);   
                        }
                    img:nth-child(1){
                        width: px2rem(220);
                        height: px2rem(200);
                    }
                    span{
                        position: relative;
                        font-size: px2rem(16);
                        top: px2rem(-100);
                        z-index: 2;
                    }
                    img:nth-child(5){
                        width: 100%;
                        position: relative;
                        top: px2rem(-180);
                        z-index: 1;
                    }
                    }
                }
            }
        }
    }
.bottomFixed{
    ul{
        width: px2rem(750);
        z-index: 10;
        display: flex;
        background: white;
        position: fixed;
        bottom: 0;
        li:nth-child(1){
            font-weight: 700;
        }
        li{
            width: px2rem(100);
            height: px2rem(80);
            font-size: px2rem(16);
            text-align: center;
            margin-left: 40px;
            
            img{
                width: px2rem(60);
                height: px2rem(50);
                margin: auto;
                display: block;
            }
        }
    }
}
.return{
    width: px2rem(30);
    height: px2rem(30);
    border-radius: 50%;
    font-size: px2rem(30);
    display: none;
    z-index: 10;
    cursor: pointer;
    background: #4BA093;
    text-align: center;
    position: fixed;
    top: px2rem(350);
    right: px2rem(50);
}

@media screen and (min-width: 400px) {
    html {
        font-size: 420 / 15 + px;
    }

   
}
@media screen and (min-width: 530px) {
    html {
        font-size: 480 / 15 + px;
    }

   
}

@media screen and (min-width: 570px) {
    html {
        font-size: 520 / 15 + px;
    }

   
}

@media screen and (min-width: 610px) {
    html {
        font-size: 570 / 15 + px;
    }

}

@media screen and (min-width: 650px) {
    html {
        font-size: 590 / 15 + px;
    }

  
}

@media screen and (min-width: 690px) {
    html {
        font-size: 610 / 15 + px;
    }
}
   

@media screen and (min-width: 730px) {
    html {
        font-size: 640 / 15 + px;
    }
}
   

@media screen and (min-width: 770px) {
    html {
        font-size: 660 / 15 + px;
    }
}
   

@media screen and (min-width: 790px) {
    html {
        font-size: 680 / 15 + px;
    }

   
}

@media screen and (min-width: 830px) {
    html {
        font-size: 700 / 15 + px;
    }

    
}

@media screen and (min-width: 850px) {
    html {
        font-size: 720 / 15 + px;
    }

}

@media screen and (min-width: 880px) {
    html {
        font-size: 750 / 15 + px;
    }
}
